<script setup lang="ts">

import ParticlesBg from "~/components/ui/ParticlesBg.vue";
import { useThemeVars } from 'naive-ui'
import BlurReveal from "~/components/ui/BlurReveal.vue";
import TextHoverEffect from "~/components/ui/TextHoverEffect.vue";
import BoxReveal from "~/components/ui/BoxReveal.vue";
import confetti from "canvas-confetti";
import Marquee from "~/components/ui/Marquee.vue";
import ReviewCard from "~/components/ui/ReviewCard.vue";
import Tetris from "~/components/ui/Tetris.vue";
import type {BlogItem, DiscussItem, PreviewCardItem, ProjectItem, ResponseData} from "~/types";
import {  type PageData } from '~/types';
import HorizationCardList from "~/components/HorizationCardList.vue";


interface MessageItem extends DiscussItem {
  avatar: string
}

const reviews = ref<MessageItem[]>()
const articalCardList = ref<BlogItem[]>([])
const projectCardList = ref<ProjectItem[]>([])

// console.log(useThemeVars())

// const particalesBg = ref<typeof ParticlesBg>()



// onMounted(()=> {
//   particalesBg.value?.initAnimate()
// })

// Function to trigger the confetti side cannons
function handleClick() {
  const end = Date.now() + 3 * 1000; // 3 seconds
  const colors = ["#a786ff", "#fd8bbc", "#eca184", "#f8deb1"];

  // Frame function to trigger confetti cannons
  function frame() {
    if (Date.now() > end) return;

    // Left side confetti cannon
    confetti({
      particleCount: 2,
      angle: 60,
      spread: 55,
      startVelocity: 60,
      origin: {x: 0, y: 0.5},
      colors: colors,
    });

    // Right side confetti cannon
    confetti({
      particleCount: 2,
      angle: 120,
      spread: 55,
      startVelocity: 60,
      origin: {x: 1, y: 0.5},
      colors: colors,
    });

    requestAnimationFrame(frame); // Keep calling the frame function
  }

  frame();
}

  // 获取留言
function getReviews() {
  $fetch('/api/discuss/getAllMessage').then(res => {
    const resData = res.data as PageData<DiscussItem[]>
    reviews.value = (resData.list || []).map(v=> ({...v,avatar:getRandomAvatar()}))
  })
}

function getRandomAvatar(){
  return `https://avatar.vercel.sh/${Math.random().toString(36).slice(2)}`
}

function getArticleCardList() {
  const params = {
    page: 1,
    size: 5,
    blogType: 1
  }
  $fetch('/api/blogs/getBlogs',{
    params
  }).then(res => {
    const resData = (res as unknown as ResponseData<PageData<BlogItem[]>>).data.list || []
    articalCardList.value = resData || []
  })
}

function getProjectCardList() {
  $fetch('/api/projects/getList').then(res => {
    const resData = (res as unknown as ResponseData<ProjectItem[]>).data || []
    projectCardList.value = resData || []
  })
}
onMounted(()=> {
  // 获取最新文章列表
  getArticleCardList()
  // 获取最新项目列表
  getProjectCardList()
  // 获取留言列表
  getReviews()
})

const firstRow = computed(()=> {
  return reviews.value?.slice(0, reviews.value.length / 2);
})
const secondRow = computed(()=> {
  return reviews.value?.slice(reviews.value.length / 2);
})

// 获取转换后的数据
function getTransferredArticleCardList(list: BlogItem[]):PreviewCardItem[] {
  const reData = unref(list)
  return reData.map(v=>({
    img:v.coverUrl,
    title: v.blogTitle,
    desc: v.blogDesc,
    id:v.id,
    linkUrl: ''
  }))
}

// 获取转换后的数据
function getTransferredProjectList(list: ProjectItem[]):PreviewCardItem[] {
  const reData = unref(list)
  return reData.map(v=>({
    img:v.previewUrl,
    title: v.name,
    desc: v.comment,
    id:v.id,
    linkUrl: v.url
  }))
}
</script>

<template>
<n-el class="w-11/12 m-auto">
  <section class="welcome-item min-h-60">
    <ClientOnly>
      <BlurReveal
          :delay="0.2"
          :duration="0.75"
          class="p-8"
      >
        <span class="text-3xl font-bold tracking-tighter xl:text-6xl/none sm:text-5xl cursor-pointer" @click="handleClick">欢迎来到🎉🎉🎉🎉🎉🎉</span>
        <span class="text-xl tracking-tighter xl:text-6xl/none sm:text-5xl cursor-pointer">一个无名前端ER</span>
<!--        <span class="text-xl tracking-tighter xl:text-6xl/none sm:text-5xl cursor-pointer">精心打造</span>-->
        <p class="text-pretty text-xl xl:text-4xl/none sm:text-3xl mt-10">
          <span class="flex h-auto items-center justify-center max-lg:w-full min-md:flex-1">
            <TextHoverEffect
                class="w-[90%] min-lg:min-h-64"
                text="atian的小屋"
            />
          </span>
      </p>
      </BlurReveal>
    </ClientOnly>
  </section>
  <section class="welcome-item">
    <ClientOnly>
      <Tetris
          class="h-[500px] w-full [mask-image:radial-gradient(450px_circle_at_center,#00C16A,transparent)]"
          :base="15"
          square-color="#00C16A"
      />
    </ClientOnly>
  </section>
<!--  文章列表-->
  <section class="welcome-item mb-8">
    <ClientOnly>
      <h2 class="text-3xl font-bold tracking-tighter xl:text-6xl/none sm:text-5xl mb-8">🦉最新文章🦉</h2>
<!--      文章卡片横向滚动列表-->
      <HorizationCardList :data="getTransferredArticleCardList(articalCardList)" to="/blogs"></HorizationCardList>
    </ClientOnly>
  </section>
<!--  项目列表-->
  <section class="welcome-item mb-8">
    <ClientOnly>
      <h2 class="text-3xl font-bold tracking-tighter xl:text-6xl/none sm:text-5xl mb-8">🛸最新项目🛸</h2>
      <HorizationCardList :data="getTransferredProjectList(projectCardList)" to="/projects"></HorizationCardList>
    </ClientOnly>
  </section>

  <section class="welcome-item">
    <ClientOnly>
      <h2 class="text-3xl font-bold tracking-tighter xl:text-6xl/none sm:text-5xl">🐿️留言墙🐿️</h2>
      <BoxReveal>
        <div
            class="relative mt-8 mb-8 flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-background"
        >
          <!-- First Marquee -->
          <Marquee
              pause-on-hover
              class="[--duration:20s]"
          >
            <ReviewCard
                v-for="review in firstRow"
                :key="review.id"
                :img="review.avatar"
                :name="review.commenter"
                :username="'@'+review.commenter"
                :body="review.content"
            />
          </Marquee>

          <!-- Second Marquee (reverse) -->
          <Marquee
              reverse
              pause-on-hover
              class="[--duration:20s]"
          >
            <ReviewCard
                v-for="review in secondRow"
                :key="review.id"
                :img="review.avatar"
                :name="review.commenter"
                :username="'@'+review.commenter"
                :body="review.content"
            />
          </Marquee>

          <!-- Left Gradient -->
          <div
              class="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"
          ></div>

          <!-- Right Gradient -->
          <div
              class="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background"
          ></div>
        </div>
      </BoxReveal>
    </ClientOnly>
  </section>
</n-el>
</template>

<style lang="scss" scoped>
</style>